let vm = new Vue({
    el: ".warehouse",
    data: {
        loading: false,
        tableData: [],
        tfootContent: {},
        test: [],
        allpages: 0,
    },
    methods: {
        getDate() {
            this.loading = true;
            let par = {
                bmid: leiku.GetUrlParam("bmid"),
                code: leiku.GetUrlParam("code"),
                name: leiku.GetUrlParam("name"),
                pg: leiku.GetUrlParam("pg"),
                branchesid: leiku.GetUrlParam("branchesid"),
                colorid: leiku.GetUrlParam("colorid"),
                fsfsid: leiku.GetUrlParam("fsfsid"),
                componentid: leiku.GetUrlParam("componentid"),
                shaxianleixingid: leiku.GetUrlParam("shaxianleixingid"),
                cangwei: leiku.GetUrlParam("cangwei"),
                cangku: leiku.GetUrlParam("cangku"),
                benwaicangku: leiku.GetUrlParam("benwaicangku"),
                neibupici: leiku.GetUrlParam("neibupici"),
                khid: leiku.GetUrlParam("khid"),
                qq: leiku.GetUrlParam("qq")
            }

            leiku.post('http://dongtai.fsslpc.com/api/2020092120168998', par, res => {
                let data = res.data;
                if (data.a.length) {
                    this.test = data.a.slice(1, 50);
                    this.tableData = data;
                    this.tfootContent = data.b[0];


                    this.printPageing();

                    $(".count").text($(".container").find("table").length);
                    this.loading = false;
                }
            })
        },
        printPageing() {
            const printHeight = 980;

            this.tableData.a.forEach(item => {
                let tbLen = $(".container").find("table").length - 1;
                let currentTable = $(".container").find("table").eq(tbLen);

                if (currentTable.outerHeight(true) < printHeight) {
                    currentTable.find("tbody").append(
                        `
                        <tr class="tdStyle">
                            <td>${item.name}</td>
                            <td>${item.code}</td>
                            <td>${item.khmc}</td>
                            <td>${item.bm}</td>
                            <td>${item.cktx}</td>
                            <td>${item.cwtx}</td>
                            <td>${item.neibupici}</td>
                            <td>${item.pg}</td>
                            <td>${item.xckg}</td>
                            <td>${item.xcjianshu}</td>
                            <td>${item.danjia}</td>
                            <td>${item.remarks}</td>
                        </tr>
                    `)
                } else {
                    let str =
                        `<div class="cut"></div>
                        <table style="width:100%" id="aaa">
                            <thead class="header">
                                <tr>
                                    <th colspan="12"  style="font-size: 20px;padding-top:10px;position: relative;border-color: transparent;border-bottom-color: black;">
                                        <span>仓库资料查询报表</span>
                                        <span style="position: absolute; right:20px;bottom:0px; font-size: 15px;">
                                        <span class="page">第${tbLen+2}页，</span>
                                        共<span class="count"></span>页                                                   
                                        </span>
                                    </th>
                                </tr>
                                <tr class="thStyle">
                                    <th style="min-width:90px;">名称</th>
                                    <th style="min-width:65px;">产品编码</th>
                                    <th style="min-width:80px;">供应商</th>
                                    <th  style="min-width:60px;">部门</th>
                                    <th  style="min-width:80px;">仓库</th>
                                    <th  style="min-width:50px;">仓位</th>
                                    <th  style="min-width:70px;">内部批次</th>
                                    <th  style="min-width:50px;">供应商批次</th>
                                    <th  style="min-width:50px;">现存数量(KG)</th>
                                    <th  style="min-width:40px;">现存件数</th>
                                    <th  style="min-width:60px;">成本</th>
                                    <th  style="min-width:80px;">备注</th>
                                </tr>
                            </thead>
        
                            <tbody>
                            </tbody>
                                            
                            <tfoot class="tfStyle">
                                <td></td>
                                <td></td>
                                <td>总数量：</td>
                                <td>${this.tfootContent.sumkg}</td>
                                <td>总件数：</td>
                                <td>${this.tfootContent.sumjianshu}</td>
                                <td>制表人：</td>
                                <td colspan="2">${this.tfootContent.printer}</td>
                                <td colspan="2">制表日期：</td>
                                <td>${this.tfootContent.printtime}</td>
                            </tfoot>
                        </table>
                    `;
                    $(".container").append(str);
                }

            })                    

        },


        prints() {
            $(this.$refs.printPage).print({
                stylesheet: "../css/warehouse_info.css",
                globalStyles: false,
                mediaPrint: true,
                iframe: true,
            });

        },

    },
    mounted() {
        this.getDate();

    }
})